<template>
  <div class="parallel-coordinates-parent" ref="parent">
      <svg class="parallel">
      </svg>
  </div>
</template>

<script>
import d3 from "d3";

export default {
  data() {
    return {
      data: [
        ...(() => {
          var arr = [];
          for (let i = 1; i <= 19; i++) {
            arr.push({
              a: (Math.random() * 1000) % 100,
              b: (Math.random() * 1000) % 200,
              c: (Math.random() * 1000) % 50
            });
          }
          return arr;
        })()
      ]
    };
  },
  mounted() {
    const ParentSelection = d3.select(this.$refs["parent"]);
    const outer_width = 1920,outer_height=200;
    const padding = { left: 30, right: 5, top: 5, bottom: 0 };
    const width = outer_width-padding.left-padding.right,
      height = outer_height-padding.top-padding.bottom; //内部作图区域的长宽
    
    const svg = ParentSelection.select("svg.parallel");
    svg
      .attr("width", width + padding.left + padding.right)
      .attr("height", height + padding.bottom + padding.top);
    Object.defineProperty(svg, "$data", {
      get: function() {
        return this.data;
      }.bind(this)
    }); //[{a,b,c}]
    // debugger;
    +function drawCoordinates() {
      var scales = [];
      for (let name of ["a", "b", "c"]) {
        // debugger
        scales[name] = {
          name,
          scale: d3.scale
            .linear()
            .domain([
              d3.min(svg.$data, d => d[name]),
              d3.max(svg.$data, d => d[name])
            ])
            .range([0, height])
        };
        scales.push(scales[name]);
      }
      svg
        .selectAll("g.axis")
        .data(scales)
        .enter()
        .append("g")
        .classed("axis", true)
        .each(function(d, i) {
          var g = d3.select(this);
          var axis = d3.svg
            .axis()
            .scale(d.scale)
            .orient("left");
          g
            .attr("transform", () => {
              return (
                "translate(" +
                (padding.left + i * (width / (scales.length - 1))) +
                "," +
                padding.top +
                ")"
              );
            })
            .call(axis);
        });

      Object.defineProperty(svg, "$scales", {
        get: () => {
          return scales;
        }
      });
    }.bind(this)();
    +(function drawLines() {
      svg.$data;
      svg.$scales;
      // debugger;
      var lineGen = d3.svg
        .line().interpolate("cardinal")
        .x((d, i) => {
          // debugger;
          return padding.left + width / (svg.$scales.length - 1) * i;
        })
        .y((d, i) => {
          return padding.top + svg.$scales[i].scale(d);
        });
        var colorScale = d3.scale.category20b().domain("a","z");
      svg
        .selectAll("path.line")
        .data(svg.$data)
        .enter()
        .append("path")
        .classed("line", true)
        .attr("d", data => {
          var line = lineGen.tension(0.7)(
            (() => {
              var arr = [];
              arr.push(data["a"]);
              arr.push(data["b"]);
              arr.push(data["c"]);
              return arr;
            })()
          );
          // debugger;
          return line;
        })
        .attr("raw", d => {
          return JSON.stringify(d);
        })
        .attr("stroke",(d)=>{
          // debugger
          return colorScale(JSON.stringify(d));
        })
        .on("mouseover",function(data,i){
          var path = d3.select(this);
          path.classed("hover",!path.classed("hover"))
        })
    })();
  }
};
</script>

<style lang="scss">
.parallel-coordinates-parent {
  svg.parallel {
    path.line{
      fill: none;//避免变成填充颜色的多边形
      stroke-dasharray: 5,2;
      stroke-opacity: 0.5;
      // transition: 1s;
      &.hover{
        stroke-width: 5px;
        stroke-opacity: 0.7;
      }
    }
    g.axis {
      path,
      line {
        fill: none;
        stroke: hsla(330, 113%, 26%, 1);
        shape-rendering: crispEdges;
      }
      text {
        fill: black;
        font-size: 11px;
        font-weight: bold;
        font-family: sans-serif;
      }
    }
  }
}
</style>
